<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理 - MES系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <h1><i class="fas fa-box"></i> 产品管理</h1>
            <div class="user-info">
                <span id="currentTime"></span>
                <a href="index.html" class="btn btn-secondary">
                    <i class="fas fa-home"></i> 返回主页
                </a>
            </div>
        </header>

        <!-- Navigation -->
        <nav class="sidebar">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="dashboard.html">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>仪表盘</span>
                    </a>
                </li>
                <li class="nav-item active">
                    <i class="fas fa-box"></i>
                    <span>产品管理</span>
                </li>
                <li class="nav-item">
                    <a href="workorders.html">
                        <i class="fas fa-clipboard-list"></i>
                        <span>工单管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="production-records.html">
                        <i class="fas fa-cogs"></i>
                        <span>生产记录</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page-header">
                <h2>产品管理</h2>
                <div class="header-actions">
                    <button class="btn btn-primary" onclick="showAddProductModal()">
                        <i class="fas fa-plus"></i> 添加产品
                    </button>
                    <button class="btn btn-success" onclick="exportProducts()">
                        <i class="fas fa-download"></i> 导出
                    </button>
                </div>
            </div>

            <!-- 搜索和筛选 -->
            <div class="search-bar">
                <div class="search-group">
                    <input type="text" id="productSearch" placeholder="搜索产品名称或代码..." class="form-control">
                    <button class="btn btn-secondary" onclick="searchProducts()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <select id="categoryFilter" class="form-control">
                    <option value="">所有分类</option>
                    <option value="电子产品">电子产品</option>
                    <option value="电脑配件">电脑配件</option>
                    <option value="机械零件">机械零件</option>
                </select>
                <select id="statusFilter" class="form-control">
                    <option value="">所有状态</option>
                    <option value="active">在产</option>
                    <option value="inactive">停产</option>
                </select>
                <button class="btn btn-warning" onclick="clearFilters()">
                    <i class="fas fa-times"></i> 清除筛选
                </button>
            </div>

            <!-- 产品统计 -->
            <div class="stats-summary">
                <div class="stat-item">
                    <span class="stat-label">总产品数:</span>
                    <span class="stat-value" id="totalProductCount">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">分类数:</span>
                    <span class="stat-value" id="categoryCount">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">总库存:</span>
                    <span class="stat-value" id="totalStock">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">总价值:</span>
                    <span class="stat-value" id="totalValue">¥0</span>
                </div>
            </div>

            <!-- 产品表格 -->
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                            </th>
                            <th onclick="sortTable('productCode')">
                                产品代码 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('productName')">
                                产品名称 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('category')">
                                分类 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('price')">
                                价格 <i class="fas fa-sort"></i>
                            </th>
                            <th onclick="sortTable('stock')">
                                库存 <i class="fas fa-sort"></i>
                            </th>
                            <th>状态</th>
                            <th onclick="sortTable('createTime')">
                                创建时间 <i class="fas fa-sort"></i>
                            </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="productsTableBody">
                        <tr>
                            <td colspan="9" class="loading">
                                <i class="fas fa-spinner fa-spin"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示 <span id="pageStart">0</span> - <span id="pageEnd">0</span> 条，
                    共 <span id="totalItems">0</span> 条记录
                </div>
                <div class="pagination">
                    <button class="btn btn-sm btn-secondary" onclick="previousPage()" id="prevBtn">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </button>
                    <span class="page-numbers" id="pageNumbers"></span>
                    <button class="btn btn-sm btn-secondary" onclick="nextPage()" id="nextBtn">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>

            <!-- 批量操作 -->
            <div class="batch-actions" id="batchActions" style="display: none;">
                <div class="batch-info">
                    已选择 <span id="selectedCount">0</span> 个产品
                </div>
                <div class="batch-buttons">
                    <button class="btn btn-warning" onclick="batchEdit()">
                        <i class="fas fa-edit"></i> 批量编辑
                    </button>
                    <button class="btn btn-danger" onclick="batchDelete()">
                        <i class="fas fa-trash"></i> 批量删除
                    </button>
                    <button class="btn btn-secondary" onclick="clearSelection()">
                        <i class="fas fa-times"></i> 取消选择
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加/编辑产品模态框 -->
    <div id="productModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">添加产品</h3>
                <span class="close" onclick="hideModal()">&times;</span>
            </div>
            <form id="productForm">
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">产品代码 *</label>
                            <input type="text" class="form-control" name="productCode" required>
                            <small class="form-help">产品的唯一标识码</small>
                        </div>
                        <div class="form-group">
                            <label class="form-label">产品名称 *</label>
                            <input type="text" class="form-control" name="productName" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">分类 *</label>
                            <select class="form-control" name="category" required>
                                <option value="">请选择分类</option>
                                <option value="电子产品">电子产品</option>
                                <option value="电脑配件">电脑配件</option>
                                <option value="机械零件">机械零件</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">价格 *</label>
                            <input type="number" class="form-control" name="price" step="0.01" min="0" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">库存数量 *</label>
                            <input type="number" class="form-control" name="stock" min="0" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">最小库存</label>
                            <input type="number" class="form-control" name="minStock" min="0">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">产品描述</label>
                        <textarea class="form-control" name="description" rows="3" placeholder="产品详细描述..."></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <select class="form-control" name="status">
                            <option value="active">在产</option>
                            <option value="inactive">停产</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideModal()">取消</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 产品详情模态框 -->
    <div id="productDetailModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">产品详情</h3>
                <span class="close" onclick="hideDetailModal()">&times;</span>
            </div>
            <div class="modal-body" id="productDetailContent">
                <!-- 产品详情内容将在这里动态加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideDetailModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast"></div>

    <script src="js/products.js"></script>
</body>
</html>